<template>
  <div id='CartListItem'>
    <div class="check-botton">
      <check-botton :isCheck="goods.isCheck" @click.native="checkclick"></check-botton>
    </div>
    <div class="item-image">
      <img :src="goods.img" alt="" class="goods-img" @load="shopitemload">
    </div>
    <div class="title">
      <div class="desc">
        {{goods.desc}}
      </div>

      <div class="adding">
        <div class="price">{{goods.price}}</div>
        <div class="counter">×{{goods.counter}}</div>
      </div>
    </div>


  </div>
</template>

<script>
  import CheckBotton from 'components/common/CheckBotton/CheckBotton.vue'
  export default {
    name: 'CartListItem',
    data() {
      return {

      }
    },
    props: {
      goods: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      shopitemload() {
        this.$bus.$emit('shopitemload')
      },
      checkclick() {
        this.goods.isCheck = !this.goods.isCheck
      }
    },
    components: {
      CheckBotton
    }
  }
</script>

<style scoped>
  #CartListItem {
    display: flex;
    height: 100px;
    overflow: hidden;
    /* width: 100vw; */
    word-wrap: break-word;
    word-break: break-all;

  }

  #CartListItem img {
    width: 100px;
  }

  .title {
    flex: 1;
    width: 100%;

  }

  .desc {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .adding {
    margin: 20px;
  }

  .counter {
    float: right;
  }

  .price {
    float: left;
  }

  .item-image {
    flex: 0.5;
  }

  .check-botton {
    flex: 0.1;
    padding-top: 40px;
  }
</style>